/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Platform,
    Navigator,
    Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Home from '../Home/home';
import Shop from '../Shop/shop';
import More from '../More/more';
import Mine from '../Mine/mine';

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home'  //默认选中主页
        }
    }
    renderTabBarItem(title,icon_name,icon_name_select,selectedTab,componentName,Component){
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === selectedTab }
                title={title}
                renderIcon={() => <Image source={{ uri: icon_name }} style={styles.iconStyle} />}
                renderSelectedIcon={() => <Image source={{ uri: icon_name_select }} style={styles.iconStyle} />}
                onPress={() => this.setState({ selectedTab: selectedTab }) }
                selectedTitleStyle={styles.selectedTitleStyle}
                >
                <Navigator
                    initialRoute={{ name: componentName, component: Component }}
                    //配置场景
                    configureScene=
                    {
                        (route) => {
                            //这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
                            //  return Navigator.SceneConfigs.PushFromRight;
                            return ({
                                    ...Navigator.SceneConfigs.PushFromRight,
                                    gestures: null
                                    })
                                }
                            }
                    renderScene={
                    (route, navigator) => {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator} />
                    }
                } />
            </TabNavigator.Item>
        )
    }
    render() {
        return (
            <TabNavigator>
                {this.renderTabBarItem("首页",'icon_tabbar_homepage','icon_tabbar_homepage_selected','home','首页',Home)}
                {this.renderTabBarItem("购物",'icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','shop','购物',Shop)}
                {this.renderTabBarItem("更多",'icon_tabbar_mine','icon_tabbar_mine_selected','more','更多购物',More)}
                {this.renderTabBarItem("我的",'icon_tabbar_misc','icon_tabbar_misc_selected','mine','我的',Mine)}    
            </TabNavigator>
        );
    }
}
const styles = StyleSheet.create({
    iconStyle: {
        width:Platform.OS ==='ios'? 30 : 25 ,
        height: Platform.OS === 'ios' ? 30 : 25
    },
    selectedTitleStyle:{
        color:'orange'
    }
})
